<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS3 图片hover pop-out</title>
  <style>
    figure {
      --hov: 0;
      --not-hov: calc(1 - var(--hov));
      display: grid;
      place-self: center;
      margin: 0;
      padding-top: 5%;
      transform: scale(calc(1 - .1*var(--not-hov)));
      overflow: hidden;
      border-radius: 0 0 clamp(4em, 20vw, 15em) clamp(4em, 20vw, 15em);
    }
  
    figure::before,
    figure img {
      grid-area: 1/1;
      place-self: end center;
    }
  
    figure::before {
      content: "";
      padding: clamp(4em, 20vw, 15em);
      border-radius: 50%;
      background: url('../images/animaiton_bg.png') 50%/cover;
    }
  
    figure:hover {
      --hov: 1;
    }
  
    img {
      width: calc(2*clamp(4em, 20vw, 15em));
      border-radius: clamp(4em, 20vw, 15em);
      transform: translateY(calc((1 - var(--hov))*10%)) scale(calc(1.25 + .05*var(--hov)));
    }
  </style>
</head>
<body>
  <figure>
    <img src='../images/772544-20210415165157272-904092339.png' alt='Irma'>
  </figure>
</body>
</html>